<template>
  <main class="main-content">
    <div class="breadcrumb">
      <span class="breadcrumb-item">系统管理</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">角色管理</span>
    </div>

    <div class="card">
      <!-- 操作栏 -->
      <div class="table-actions-bar">
        <div class="actions-group" style="margin-left: 0;">
          <button class="btn btn-primary">新增角色</button>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>角色名称</th>
              <th>角色描述</th>
              <th>用户数</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="role in roles" :key="role.id">
              <td>{{ role.name }}</td>
              <td>{{ role.description }}</td>
              <td>{{ role.userCount }}</td>
              <td>{{ role.createTime }}</td>
              <td class="action-links">
                <a href="#">配置权限</a>
                <a href="#">编辑</a>
                <a href="#" class="text-danger">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';

const roles = ref([
  {
    id: 1,
    name: '系统管理员',
    description: '拥有系统的所有权限',
    userCount: 1,
    createTime: '2023-01-01 10:00:00'
  },
  {
    id: 2,
    name: '运营人员',
    description: '负责设备和数据的日常管理和运营',
    userCount: 5,
    createTime: '2023-01-10 11:00:00'
  },
  {
    id: 3,
    name: '访客',
    description: '只能查看数据，不能进行任何操作',
    userCount: 20,
    createTime: '2023-01-15 12:00:00'
  }
]);
</script>

<style scoped>
.text-danger {
  color: #f5222d;
}
</style>